<template >
	<div class="contain" >
		<div class="contain-header">
			<el-breadcrumb  separator="/">
				<el-breadcrumb-item>订单管理</el-breadcrumb-item>
				<el-breadcrumb-item>订单报表</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="orderReport-body">
			<div class="body-header">
				<div style="display: flex;align-items: center;justify-content: space-around">
					<p>订单状态: &nbsp;&nbsp;</p>
					<el-select placeholder="请选择状态" v-model="pageData.orderStatus" @change="changeStatus" size="small" style="margin-right: 20px">
						<el-option
								v-for="item in statusData"
								:key="item.id"
								:label="item.label"
								:value="item.id">
						</el-option>
					</el-select>
					<p>订单来源: &nbsp;&nbsp;</p>
					<el-select placeholder="请选择来源" v-model="pageData.orderSource" @change="changeFrom" size="small">
						<el-option
								v-for="item in fromData"
								:key="item.id"
								:label="item.label"
								:value="item.id">
						</el-option>
					</el-select>
				</div>
			<div>
				<el-button icon="el-icon-refresh-right" size="small" @click="resetList">重 置</el-button>
			</div>
			</div>
			<div class="body-table">
				<el-table
						:data="tableData"
						stripe
						style="width: 100%">
					<el-table-column
							align="center"
							prop="orderNum"
							show-overflow-tooltip
							label="订单编号">
					</el-table-column>
					<el-table-column
							align="center"
							prop="createTime"
							show-overflow-tooltip
							label="下单时间">
					</el-table-column>
					<el-table-column
							align="center"
							prop="good.name"
							show-overflow-tooltip
							label="商品名称">
					</el-table-column>
					<el-table-column
							align="center"
							prop="good.totalNum"
							label="商品数量">
					</el-table-column>
					<el-table-column
							align="center"
							prop="totalPrice"
							label="订单金额(¥)">
					</el-table-column>
					<el-table-column
							align="center"
							prop="totalWeight"
							label="商品毛重(kg)">
					</el-table-column>
					<el-table-column
							align="center"
							label="支付方式">
						<template slot-scope="scope">
							{{scope.row.payType === 1 ? '支付宝' : scope.row.payType === 2 ? '微信' : '信用卡'}}
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							show-overflow-tooltip
							label="订单来源">
						<template slot-scope="scope">
							{{scope.row.orderSource === 1 ? '阿里巴巴国际站' : scope.row.orderSource === 2 ? '亚马逊' : '速卖通'}}
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							show-overflow-tooltip
							label="收件人姓名">
						<template slot-scope="scope">
							{{scope.row.receiptName === null ? '-' : scope.row.receiptName}}
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							show-overflow-tooltip
							label="收件人地址">
						<template slot-scope="scope">
							{{scope.row.receiptAddress === null ? '-' : scope.row.receiptAddress}}
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							show-overflow-tooltip
							label="收件人电话">
						<template slot-scope="scope">
							{{scope.row.receiptPhone === null ? '-' : scope.row.receiptPhone}}
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							label="收件人国家">
						<template slot-scope="scope">
							{{scope.row.receiptCountry === null ? '-' : scope.row.receiptCountry}}
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							label="订单状态">
						<template slot-scope="scope">
							<el-tag :type="scope.row.orderStatus === 1? '' : scope.row.orderStatus === 2? 'success' : scope.row.orderStatus === 3? 'info' : scope.row.orderStatus === 4? 'warning' : scope.row.orderStatus === 5? 'danger' : ''">
								{{scope.row.orderStatus === 1? '待寄件' : scope.row.orderStatus === 2? '待审核' : scope.row.orderStatus === 3? '待提交' : scope.row.orderStatus === 4? '待拣货' : scope.row.orderStatus === 5? '待发货' : scope.row.orderStatus === 6? '已发货' : '已完成'}}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							width="180px"
							label="操作">
						<template slot-scope="scope">
							<el-button :disabled="scope.row.orderStatus !== 1" type="primary" @click="getInMail(scope.row.id)" size="mini">委托寄件发货</el-button>
						</template>
					</el-table-column>
					
					
				</el-table>
			</div>
			<div class="body-page">
				<el-pagination
						background
						layout="prev, pager, next"
						@current-change="handleCurrentChange"
						:page-size="pageData.pageSize"
						:total="total">
				</el-pagination>
			</div>
		</div>
	</div>
</template >

<script >
	import { orderPage, mailReset } from "../api/orderModules";

    export default {
        name: "orderReport",
        data(){
            return{
                statusData: [
                    {
                    id: null,
                    label: '全部'
                	},
					{
                    id: 1,
                    label: '待寄件'
					},
                    {
                        id: 2,
                        label: '拣审核'
                    },
                    {
                        id: 3,
                        label: '待提交'
                    },
                    {
                        id: 4,
                        label: '拣货中'
                    },
                    {
                        id: 5,
                        label: '已发货'
                    },
                    {
                        id: 6,
                        label: '已完成'
                    },
                ],
				fromData:[
                    {
                        id: null,
                        label: '全部'
                    },
                    {
                        id: 1,
                        label: '阿里巴巴国际站'
                    },
                    {
                        id: 2,
                        label: '亚马逊'
                    },
                    {
                        id: 3,
                        label: '速卖通'
                    }
				],
                tableData: [],
				pageData:{
                    orderSource: null,
                    orderStatus: null,
                    pageIndex: 1,
                    pageSize: 10
                },
				total:null
            }
        },
		mounted() {
            this.getPage()
        },
        methods:{
			 //获取订单列表
             async getPage(){
                const { data } = await orderPage(this.pageData)
				if (data.code === 200) {
				    this.tableData = data.data.data
					this.total = data.data.total
				}
			},
			//切换订单状态
            changeStatus(){
                 this.getPage()
			},
			//切换订单来源
			changeFrom(){
                this.getPage()
			},
            //分页
            handleCurrentChange(val) {
                this.pageData.pageIndex = val
                this.getPage()
            },
			//重置列表
            async resetList(){
                 this.pageData.orderSource = null
				this.pageData.orderStatus = null
				const { data } = await mailReset()
				if (data.code === 200) {
				    this.$message.success(data.message)
					await  this.getPage()
				}
			},
			//委托寄件
            getInMail(id){
                 this.$router.push({
					 name:'consignedMail',
					 query:{
					     id
					 }
				 })
			}
		}
    }
</script >

<style scoped lang="less">
	.orderReport-body{
		width: 100%;
		height: calc(100% - 50px);
		background-color: #ffffff;
		.body-header{
			width: 100%;
			height: 50px;
			padding: 0 20px;
			margin-bottom: 20px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.body-table {
			width: 100%;
			max-height: calc(100% - 150px);
		}
		.body-page{
			width: 100%;
			height: 50px;
			margin-top: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style >
